//axios全局设置请求拦截器
axios.interceptors.request.use(
    (config)=>{
        config.headers['Authorization']='Bearer'+''+localStorage.setItem('token')
        return config
    },
    (error)=>{
        return Promise.reject(error)
    }
)

//设置全局响应拦截器
axios.interceptors.respon.use(
    (res)=>{
        return res
    },
    (error)=>{
        if(error.response.status==401){
            localStorage.removeItem('token')
            location.href='./login.html'
        }
        else if(error.response.status==404){
            alert('访问路径有误')
        }
        else if(error.response.status==500){
            alert('服务器内部错误')
        }
        return Promise.reject(error)
    }
)
//获取搜索按钮
var searchBtn = document.querySelector('.search-container button')
var inputEle = document.querySelector('.search-container input')
//render(data.list)

//获取localStorage中存储的用户信息
var userinfo = JSON.parse(localStorage.getItem('userinfo'));
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name;
//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list)
    })
}

//点击上一页,获取上一页的数据

document.querySelector('.btns .pre').onclick = function () {
    //点
    for (page = 4; page > 0; page--) {
        axios.get('/user/list', { params: { page: page, count: 2 } }).then((res) => {
            console.log(res);
            // if (page <4) {
            render(res.data.list)
            // }
        })
    }
}
//点击下一页,获取下一页的数据
document.querySelector('.btns .next').onclick = function () {
    var page = 1
    page++
    axios.get('/user/list', { params: { page: page, count: 2 } }).then((res) => {
        console.log(res.data);
        render(res.data.list)
    })
}
//给tbody绑定点击事件(事件委托)
var tbody = document.querySelector('tbody');
tbody.onclick = (e) => {
    //e.target.tagName == 'SPAN' 判断是不是 span 标签
    //e.target.classList.contains('icon-shanchu') 判断是不是 包含 icon-shanchu 这个类名
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        //先获取这个删除按钮对应用户的手机号
        console.log(e.target);
        //发起 删除请求 , 删除服务器端的这个用户
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            //如果想要在发请求给服务器,删除成功之后, 同时让页面也看到删除后的效果,有两种方案
            //方案一: 本地删除这个dom节点
            console.log(e.target.dataset.phone);
            //e.target.parentNode.parentNode.remove();
            //方案二: 让删除接口 返回删除后的新数据, 本地调用render方法重新渲染.
            render(res.data.list)
        })
    }
}
function render(data) {
    var str = ``
    str = data.map((item, index) => {
        return `
                <tr>
                    <td>${item.email}</td>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.isgroup ? '编辑组' : '其他组'}</td>
                    <td>${item.isadmin ? '是' : '否'}</td>
                    <td><span class=" ${item.status ? 'statusok' : 'error'}">${item.status ? '正常' : '异常'}</span> </td>
                    <td>
                        <span class="iconfont icon-xiugaioryijian editicon"></span>&emsp;
                        <span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span>
                    </td>
                </tr>
        `
    }).join('')
    if (str == '') {
        str = `<td style:"width:100%;">未查询到数据</td>`
    }
    document.querySelector('tbody').innerHTML = str;
}
// /axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page: 1, count: 2 } }).then((res) => {
    //调用render方法, 传入后端返回的数据 渲染列表
    render(res.data.list);
    console.log(res.data);
})


